<div>
	<br />
	&nbsp;<button id='assignStaffButton' class='delete_row' >Assign Staff to selected course</button>
</div>
<div class="add_delete_toolbar" /><br />
<div id="example_wrapper" class="dataTables_wrapper" role="grid">
	<table cellpadding="0" cellspacing="0" border="0" id="example" class='display dataTable'>
	<thead>
		<tr>
			<th width="0%">ID</th>
			<th width="8%">Training Mode</th>
			<th width="15%">Course Name</th>
			<th width="8%">Provider</th>
			<th width="8%">Plan From</th>
			<th width="8%">Plan To</th>
			<th width="8%">Act From</th>
			<th width="8%">Act To</th>
			<th width="8%">Value</th>
			<!--<th width="4%"></th>-->
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="5" class="dataTables_empty">Loading data from server</td>
		</tr>
	</tbody>
</table>
</div>

<!-- Custom form for adding new records -->
<form id="formAddNewRow" action="#" title="Add new record">
	<table cellspacing="7">
		<tr>
			<td>
				<label for="TRN_Mode">Training mode</label>			
			</td>
			<td>
				<input type="text" name="TRN_Mode" id="TRN_Mode" class="required ui-state-default" rel="1" />
			</td>
		</tr>
		<tr>
			<td>
				<label for="CourseName">Course Name</label>
			</td>
			<td>
				<input type="text" name="CourseName" id="CourseName" class="required ui-state-default" rel="2" />
			</td>
		</tr>
		<tr>
			<td>
				<label for="TRN_Provider">Training Provider &nbsp;&nbsp;&nbsp;</label>
			</td>
			<td>
				<input type="text" name="TRN_Provider" id="TRN_Provider" rel="3" class="ui-state-default" />
			</td>
		</tr>
		<tr>
			<td>
				<label for="PlanFromDate">Plan from date</label>
			</td>
			<td>
				<input type="text" name="PlanFromDate" id="PlanFromDate" class="required date ui-state-default" rel="4"/>
			</td>
		</tr>
		<tr>
			<td>
				<label for="PlanToDate">Plan to date</label>
			</td>
			<td>
				<input type="text" name="PlanToDate" id="PlanToDate" class="required date ui-state-default" rel="5"/>
			</td>
		</tr>
		<tr>
			<td>
				<label for="ActFromDate">Act from date</label>
			</td>
			<td>
				<input type="text" name="ActFromDate" id="ActFromDate" class="date ui-state-default" rel="6"/>
			</td>
		</tr>
		<tr>
			<td>
				<label for="ActToDate">Act to date</label>
			</td>
			<td>
				<input type="text" name="ActToDate" id="ActToDate" class="date ui-state-default" rel="7"/>
			</td>
		</tr>
		<tr>
			<td>
				<label for="TRN_Values">Course value</label>
			</td>
			<td>
				<input type="text" name="TRN_Values" id="TRN_Values" class="required number ui-state-default" rel="8" onkeyup="this.value=add_commas(this.value);"/>
			</td>
		</tr>
		
	</table>
	<input type="hidden" name="Training_ID" id="Training_ID" rel="0" style={visibility:hidden;} />
    
	
        <!--
        <br />
            <label for="CourseName">Course Name</label>
            <input type="text" name="CourseName" id="CourseName" class="required" rel="2" />
                <br />
            <label for="TRN_Provider">Training Provider</label>
            <input type="text" name="TRN_Provider" id="TRN_Provider" rel="3" />
                <br />
            <label for="PlanFromDate">Plan from</label>
            <input type="text" name="PlanFromDate" id="PlanFromDate" class="required date" rel="4"/>
                                <label for="PlanToDate"> to</label>
            <input type="text" name="PlanToDate" id="PlanToDate" class="required date" rel="5"/>
                <br />
            <label for="ActFromDate">Actual from</label><br />
            <input type="text" name="ActFromDate" id="ActFromDate" class="date" rel="6"/>
                <br />
            <label for="ActToDate"> to</label><br />
            <input type="text" name="ActToDate" id="ActToDate" class="date" rel="7"/>
                <br />
            <label for="TRN_Values">Course value</label><br />
            <input type="text" name="TRN_Values" id="TRN_Values" class="required number" rel="8"/>
                <br />-->
        
</form>

<script>
	$(document).ready(function() {
						$('#example').dataTable( {
							"bJQueryUI": true,
                    		"sPaginationType": "full_numbers",
							"bProcessing": true,
							"sAjaxSource": '<?php echo base_url()?>training/table',
							"bStateSave": true,			        
							"bScrollCollapse": true,
							"aoColumns": [
								{ 
									"bSearchable": false, 
									"bVisible": false, 
									"aTargets": [0]
								}, // the first column is invisible
								{ "bVisible": true, "aTargets": [1] },
								{ "bVisible": true, "aTargets": [2] },
								{ "bVisible": true, "aTargets": [3] },
								{ "bVisible": true, "aTargets": [4] },
								{ "bVisible": true, "aTargets": [5] },
								{ "bVisible": true, "aTargets": [6] },
								{ "bVisible": true, "aTargets": [7] },
								{ 
									"bVisible": true, 
									"aTargets": [8]
								},
								/*
								{       
																	"sName": "",
																	"bSearchable": false,
																	"bSortable": false,
																	"fnRender": function (oObj) {
																			return "<a class='table-action-deletelink' href='/HRMT/training/delete'>Delete</a>";
																	}
																}*/
								

							],
						} ).makeEditable({
							sAddDeleteToolbarSelector: ".dataTables_length",
							//sAddDeleteToolbarSelector: ".add_delete_toolbar",
							sAddURL: '<?php echo base_url()?>training/add',
							sDeleteURL: '<?php echo base_url()?>training/delete',
							sUpdateURL: '<?php echo base_url()?>training/update',
							oAddNewRowButtonOptions: { 
								label: "Add...",
                                icons: { primary: 'ui-icon-plus' }
                            },
                            oDeleteRowButtonOptions: {
								label: "Remove",
                                icons: { primary: 'ui-icon-trash' }
                            },
                            oAddNewRowOkButtonOptions: {
								label: "Confirm",
                                icons: { primary: 'ui-icon-check' },
                                name: "action",
                                value: "add-new"
                            },
                            oAddNewRowCancelButtonOptions: { 
								label: "Close",
                                class: "back-class",
                                name: "action",
                                value: "cancel-add",
                                icons: { primary: 'ui-icon-close' }
                            },
                            oAddNewRowFormOptions: {
								title: 'Add new training course',
                                show: "blind",
                                //hide: "explode",
                                width: "450px"
                            },
                            "aoColumns" : [
                                            {cssclass: "required"},
                                            {cssclass: "required"},
                                            {},
                                            {cssclass: "required date"},
                                            {cssclass: "required date"},
                                            {cssclass: "date"},
                                            {cssclass: "date"},
                                            {
                                            	cssclass: "required number"
                                            }                                                   
                                        ]

						} );
						
				document.getElementById("assignStaffButton").disabled = true;
				
				// Init table to use
				oTable = $('#example').dataTable();
				
				// Handle table click event
				$("#example tbody").click(function(event) {
					var anSelected = fnGetSelected($('#example').dataTable());
					if (anSelected.length > 0)
					{
						document.getElementById("assignStaffButton").disabled = false;
					}
					else
					{
						document.getElementById("assignStaffButton").disabled = true;
					}
				});
				
				// Handle button assign click event
				$('#assignStaffButton').click (function() 
				{		
					var anSelected = fnGetSelected($('#example').dataTable());
					if (anSelected.length > 0)
					{
						var data = oTable.fnGetData(anSelected[0]);
						if (data!=null)
							//alert(data[0]);
							window.location = "<?php echo base_url()?>training/assign/" + data[0];
					}
				} );
		} );
	//$(".formAddNewRow").dialog({ width: 800 });
	//$( ".formAddNewRow" ).dialog( "option", "minWidth", 600 );
	$('#PlanFromDate').datepicker({ 
		changeMonth: true,
		changeYear: true,
		buttonText: '...',
		buttonImageOnly: true,
		buttonImage: '/HRMT/templates/images/calendar.gif',
		showOn: 'both'
	});
	$('#PlanToDate').datepicker({
		changeMonth: true,
		changeYear: true,
		buttonText: '...',
		buttonImageOnly: true,
		buttonImage: '/HRMT/templates/images/calendar.gif',
		showOn: 'both'
	});
	$('#ActFromDate').datepicker({
		changeMonth: true,
		changeYear: true,
		buttonText: '...',
		buttonImageOnly: true,
		buttonImage: '/HRMT/templates/images/calendar.gif',
		showOn: 'both'
	});
	$('#ActToDate').datepicker({
		changeMonth: true,
		changeYear: true,
		buttonText: '...',
		buttonImageOnly: true,
		buttonImage: '/HRMT/templates/images/calendar.gif',
		showOn: 'both'
	});
	
	function fnGetSelected( oTableLocal )
    {
        var aReturn = new Array();
        var aTrs = oTableLocal.fnGetNodes();
 
        for ( var i=0 ; i<aTrs.length ; i++ )
        {
            if ( $(aTrs[i]).hasClass('row_selected') )
            {
                aReturn.push( aTrs[i] );
            }
        }
        return aReturn;
    }
</script>
